<template>
  <div class="calendar-container">
    <a-button
      @click="handleClickSuccess"
      type="primary"
      class="button-above-calendar"
      >签到
    </a-button>
    <a-calendar v-model="value" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Modal } from "@arco-design/web-vue";

const value = ref(new Date());

const handleClickSuccess = () => {
  Modal.success({
    title: "签到",
    content: "签到成功！今天是您签到的第15天，真是个有毅力的人！",
  });
};
</script>

<style scoped>
.calendar-container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  justify-content: center;
  width: 70%; /* 占据屏幕宽度的百分之七十 */
  margin: 0 auto; /* 水平居中 */
}

.button-above-calendar {
  width: 100px;
  margin: 0 0 20px auto;
}
</style>
